<template>
    <div class="banners">
        <div class="banners-bottom" @click="openCatePage(data[3].id,data[3].name)">
            <image class="b-img-b" resize="stretch" :src='data[3].icon'></image>
            <text class='cate'>{{data[3].name}}</text>
        </div>
        <div class="banners-top">
            <div class="banner-l" @click="openCatePage(data[0].id,data[0].name)">
                <image class="b-img-l" resize="stretch" :src='data[0].icon'></image>
                <text class='cate spec' >{{data[0].name}}</text>
            </div>
            <div class="banner-r">
                <div class="banner-r-t" @click="openCatePage(data[1].id,data[1].name)">
                    <image class="b-img-rt" resize="stretch" :src='data[1].icon'></image>
                    <text class='cate'>{{data[1].name}}</text>
                </div>
                <div class="banner-r-b"  @click="openCatePage(data[2].id,data[2].name)">
                    <image class="b-img-rt" resize="stretch" :src='data[2].icon'></image>
                    <text class='cate'>{{data[2].name}}</text>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
    const modal = weex.requireModule('modal');
    export default {
        props: ["data"],
        data () {
            return {
                
               
            }
        },
        computed(){
            //TODO  暂时数据不够
            
            
        },
        components: {  
            
        },
        methods: {
            openCatePage(id,title){
                this.$router.open({
                    name: 'zst.article.category',
                    type: 'PUSH',
                    params: {'id':id},
                    navShow:true,
                    navTitle:title
                })
            }
        }
    }
</script>
<style scoped>

/*baike*/
.banners{
    padding-left:20px;
    padding-right:20px;
    /* padding-top:20px; */
    padding-bottom:20px;
}
.banners-top{
    height:342px;
    display:flex;
    flex-direction: row;
    /* margin-right:10px; */
    
}
.banner-l{
    margin-right:10px;
    height:342px;
    position: relative;
    flex:1;
    backgroundColor: #000
}
.b-img-l{
    width:400px;
    height:342px;
    position: absolute;
    /* left:0; */
    /* right:0; */
    /* bottom:0; */
    /* top:0; */
}
.banner-r{
    flex:1;
    flex-direction: column;
}
.banner-r-t{
    margin-bottom:10px;
    height:165px;
    flex:1;
    position:relative;
}
.banner-r-b{
    flex:1;
    height:165px;
    position: relative;
}
.b-img-rt,.b-img-rb{
    width:400px;
    height:166px;
    position: absolute;
}
.banners-bottom{
    margin-bottom:10px;
    height:220px;
    position:relative;
}
.b-img-b{
    position: absolute;

}
.cate{
    color:#fff;
    /* flex:1; */
    font-size:40px;
    textAlign: center;
    top:60%;
    /* backgroundColor:red; */
}
/*解决不了样式 瞎搞一个*/
.spec{
    margin-top:100px;
}
</style>